<template>
  <div>
    <div>
      <h3 style="font-weight: normal">添加列表</h3>
      <el-table :data="list" @select="selectRow" @select-all="selectAll">
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column label="账号" prop="account"></el-table-column>
        <el-table-column prop="userGroup" label="用户组"> </el-table-column>
        <el-table-column prop="ctime" label="创建时间"></el-table-column>

        <el-table-column label="操作" width="200px">
          <template slot-scope="data">
            <el-button size="mini" @click="funedit(data.row.id)"
              >编辑</el-button
            >
            <el-button size="mini" type="danger" @click="fundel(data.row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div style="margin-top: 10px">
        <el-pagination
          @current-change="pagechange"
          :page-size="pagesize"
          layout="total, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
      <div style="margin-top: 20px">
        <el-button type="danger" @click="funbatchdel">批量删除</el-button>
        <el-button type="primary">取消选择</el-button>
      </div>
      <!-- 编辑蒙层框 -->
      <div class="meskBox" v-show="show">
        <div class="mesk">
          <div class="location" @click="funclick">×</div>
          <p style="margin-left: 45px; margin-top: 50px">
            修改账号：<el-input
              style="width: 230px"
              v-model="obj.account"
            ></el-input>
          </p>

          <p style="margin-left: 45px; margin-top: 20px">
            <span>修改用户组</span>
            <el-select
              placeholder="请选择管理员"
              v-model="obj.userGroup"
              style="margin-left: 10px"
            >
              <el-option label="超级管理员" value="超级管理员"></el-option>
              <el-option label="普通管理员" value="普通管理员"></el-option>
            </el-select>
          </p>
          <el-button
            type="primary"
            style="margin-left: 160px; margin-top: 30px"
            @click="funsure"
            >确认修改</el-button
          >
        </div>
      </div>
    </div>
  </div>
</template> 
      

<script>
import { acclist, accdel, batchdel, modify } from "../../apis/user";
import { getYYYYMMDDHHMMSS } from "@/utils/utils";
export default {
  data() {
    return {
      //分页
      list: [], //用户数组
      pagesize: 4, //请求的条数
      total: 0, //总条数
      curpage: 1,
      ids: [],
      region: "普通管理员",
      show: false,
      obj: {},
      id:''
    };
  },
  created() {
    this.retable();
  },
  methods: {
    //改变当前的页数
    pagechange(page) {
      this.curpage = page; 
      this.retable();
    },
    //发送请求
    retable() {
      acclist({
        currentPage: this.curpage, //当前页码
        pageSize: this.pagesize, //每页条数
      }).then((res) => {
        // console.log(res);
        for (let obj of res.data.data) {
          obj.ctime = getYYYYMMDDHHMMSS(obj.ctime);
        }
        this.list = res.data.data;
        this.total = res.data.total;
      });
    },
    //删除
    fundel( id  ) {
      accdel({ id }).then((res) => {
        console.log(res);
        this.retable();
      });
    },

    //批量删除
    funbatchdel() {
      batchdel({ ids: JSON.stringify(this.ids) }).then((res) => {
        console.log(res);
        this.retable();
      });
    },
    selectRow(selection) {
      this.ids = selection.map((obj) => obj.id);
    },
    selectAll(selection) {
      this.ids = selection.map((obj) => obj.id);
    },

    //点击×
    funclick() {
      this.show = false;
    },
    //点击编辑
    funedit(id) {
      this.id = id
      this.show = true;
      this.list.forEach((v) => {
        if (v.id == id) {
          this.obj = {...v};
          this.obj.id = id
        }
        // console.log(v);
      });
    },

    //点击确认修改
    funsure() {
      modify(this.obj).then((res) => {
         this.retable();
         if(res.data.code==0){
           this.show=false
         }else{
           alert(res.data.msg)
         }
        // console.log(res);
      });
    },

    // toggleSelection(rows) {
    //   if (rows) {
    //     rows.forEach((row) => {
    //       this.$refs.multipleTable.toggleRowSelection(row);
    //     });
    //   } else {
    //     this.$refs.multipleTable.clearSelection();
    //   }
    // },
    // handleSelectionChange(val) {
    //   this.multipleSelection = val;
    // },
    //删除增加
    // handleEdit(index, row) {
    //   console.log(index, row);
    // },
    // handleDelete(index, row) {
    //   console.log(index, row);
    // },
    //分页
    // handleSizeChange(val) {
    //   console.log(`每页 ${val} 条`);
    // },
    // handleCurrentChange(val) {
    //   console.log(`当前页: ${val}`);
    // },
  },
};
</script>

<style lang="less">
.el-main[data-v-fae5bece] {
  line-height: 30px;

  text-align: left;
}
.el-table::before {
  height: 0;
}
.meskBox {
  // border: 1px solid rgb(238, 206, 206);
  background-color: rgba(204, 204, 204, 0.5);
  // width: 480px;
  // height: 400px;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.mesk {
  width: 400px;
  height: 260px;
  background-color: #fff;
  position: relative;
  .location {
    position: absolute;
    top: 0;
    right: 12px;
    font-size: 30px;
  }
}
</style>